<!-- 搜索框区域 -->
<template>
  <div class="formBox">
    <div class="app-left">
      <t-select
        v-model="formData.userAppId"
        :keys="keys"
        :options="appList"
        placeholder="请选择"
        autoWidth
        borderless
        @change="handleChangeAppId"
      />
    </div>
    <div class="app-right">
      <button class="line bt-grey wt-90" @click="handleCategorySortShow()">
        分组排序
      </button>
      <button class="line bt-grey wt-90" @click="handleAddCategoryShow()">
        新建分组
      </button>
      <t-input
        v-model="formData.name"
        class="line search-input"
        type="search"
        placeholder="搜索表单"
        clearable
        @change="handleSearch"
      >
        <template #prefix-icon>
          <t-icon name="search" style="color: #adadad" />
        </template>
      </t-input>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getApplicationList } from '@/api/application'

const keys = ref({
  value: 'appId',
  label: 'appName'
})
// 表单数据
const formData = ref({
  name: '',
  userAppId: ''
})
// 触发父组件的方法
const emit: Function = defineEmits([
  'handleSearch',
  'handleReset',
  'handleChangeAppId',
  'handleAddCategoryShow',
  'handleCategorySortShow'
])

const searchForm = {
  name: undefined,
  userAppId: undefined
}
// 重置表单
const handleReset = () => {
  formData.value = { ...searchForm }
}

// 新增分类
const handleAddCategoryShow = () => {
  emit('handleAddCategoryShow', {})
}

// 分类排序
const handleCategorySortShow = () => {
  emit('handleCategorySortShow', {})
}

// 切换APPID
const handleChangeAppId = () => {
  emit('handleChangeAppId', formData.value.userAppId)
}
// 搜索表单
const handleSearch = () => {
  emit('handleSearch', formData.value.name)
}

// 加载全部应用
const appList = ref([])
const fetchApp = () => {
  const params = {
    id: 'USER_APP_LIST',
    palyload: {}
  }
  getApplicationList(params).then((res) => {
    appList.value = res.data.result.data
    if (appList.value && appList.value.length > 0) {
      formData.value.userAppId = appList.value[appList.value.length - 1].appId
      handleChangeAppId()
    }
  })
}
onMounted(() => {
  fetchApp()
})
</script>
<style lang="less" scoped src="./index.less"></style>
